<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>（信用卡）银行卡开户审核</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            /*background-color: gray;*/
        }

        #d2 {
            width: 90%;
            margin-left: 5%;
            margin-top: 30px;
            height: 500px;
            overflow: auto;
            border: 1px solid black;
            background-color: rgba(255, 255, 255, 0.9);
        }

        #tab {
            /*border: 1px solid black;*/
            width: 100%;
            border-collapse: collapse

        }

        #tab thead {
            /*border-left: 1px solid #DFE2EB;*/
            /*border-top: 1px solid #DFE2EB;*/
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            display: table;
            width: 100%;
            table-layout: fixed;
            background-color: rgba(255, 255, 255, 1);
        }

        #tab tbody {
            /*border-left: 1px solid #DFE2EB;*/
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        #tab tr {
            height: 50px;
            border-bottom: 1px solid gray;
            /*border-left: 1px solid gray;*/
            /*border-right: 1px solid gray;*/
        }

        #tab td {

            /*width: 20%;*/
            /*border: 1px solid black;*/
            text-align: center;
        }

        #d3 {
            margin-top: 10px;
            width: 90%;
            margin-left: 5%;
            /*border: 1px solid red;*/

            text-align: right;

        }

        #d3 input[type=button] {
            width: 60px;
            height: 30px;
        }

        #d3 input[type=text] {
            width: 100px;
            height: 20px;
            padding-left: 10px;
        }

        .btn90 {
            width: 60px;
            height: 30px;
        }
    </style>
    <script>
        $(function () {
            //页面加载后，查询表格数据并渲染
            var page = $("#page").val();
            var pagesize = $("#pagesize").val();
            showlist(page, pagesize);


            //首页
            $("#btn10").click(function () {
                var page = 1;
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
            //上一页
            $("#btn11").click(function () {
                var page = $("#page").val();
                if (page == "1") {
                    page = $("#sizeauto").val();
                } else {
                    page = parseInt(page) - 1;
                }
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
            //下一页
            $("#btn12").click(function () {
                var page = $("#page").val();
                if (page == $("#sizeauto").val()) {
                    page = 1;
                } else {
                    page = parseInt(page) + 1;
                }
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
            //尾页
            $("#btn13").click(function () {
                var page = $("#sizeauto").val();
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
            //当前页失去焦点
            $("#page").focusout(function () {
                var page = $("#page").val();
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
            // //页面数失去焦点
            $("#pagesize").focusout(function () {
                var page = 1;
                var pagesize = $("#pagesize").val();

                showlist(page, pagesize);
            })
        })

        //加载页面数据
        function showlist(page, pagesize) {
            $.ajax({
                url: "/UserCardServlet",
                data: {action: "findAll", page: page, pagesize: pagesize},
                type: "post",
                dataType: "json",
                success: function (d) {
                    if (d.code == 1) {
                        console.log(d);
                        //清空表格原有数据
                        $("#tbody").html("");
                        //赋值
                        $("#page").val(d.data.curPage);
                        $("#pagesize").val(d.data.pageSize);
                        $("#sizeauto").val(d.data.totalPage);
                        //渲染表格数据
                        for (var i = 0; i < d.data.data.length; i++) {
                           //alert(d.data.data[i].u_idcard);
                            var type = d.data.data[i].c_type == 1 ? '信用卡' : '储蓄卡';
                            $("#tbody").append("<tr>" +
                                "<td>" + d.data.data[i].id + "</td>" +
                                "<td>" + d.data.data[i].c_account + "</td>" +
                                "<td>" + d.data.data[i].c_phone + "</td>" +
                                "<td>" + type + "</td>" +
                                "<td>" + d.data.data[i].u_name + "</td>" +
                                "<td>" + d.data.data[i].u_idcard + "</td>" +
                                "<td>" + d.data.data[i].u_credit+ "</td>" +
                                "<td><input type='button' value='审核'class='btn90' style='margin-right: 10px' onclick='f1(" + d.data.data[i].id + ")'>" +
                                "<input type='button' value='拒绝'class='btn90' onclick='f2(" + d.data.data[i].id + ")'></td>" +
                                "</tr>")
                        }
                    }
                }
            })
        }

        //审核通过
        function f1(id) {
            $.ajax({
                url: "/cardServlet",
                data: {action: "updateCard",id:id,type:1},
                type: "post",
                dataType: "json",
                success: function (d) {
                    if (d.code == 1) {
                        alert(d.msg);
                        //刷新表格
                        var page = $("#page").val();
                        var pagesize = $("#pagesize").val();
                        showlist(page, pagesize);
                    }else {
                        alert(d.msg)
                    }
                }
            })
        }

        //拒绝审核
        function f2(id) {
            $.ajax({
                url: "/cardServlet",
                data: {action: "updateCard",id:id,type:2},
                type: "post",
                dataType: "json",
                success: function (d) {
                    if (d.code == 1) {
                        alert(d.msg);
                        //刷新表格
                        var page = $("#page").val();
                        var pagesize = $("#pagesize").val();
                        showlist(page, pagesize);
                    }else {
                        alert(d.msg)
                    }
                }
            })
        }
    </script>

</head>
<body>
<h1 style="margin-left: 600px;margin-top: 20px">日志</h1>
<div id="d2">
    <table id="tab" style="">
        <thead>
        <tr>
            <th>编号</th>
            <th>开户行</th>
            <th>手机号</th>
            <th>卡片类型</th>
            <th>开户者名称</th>
            <th>身份证号</th>
            <th>信用积分</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>
<div id="d3">
    <input type="button" value="首页" id="btn10">
    <input type="button" value="上一页" id="btn11">
    <input type="button" value="下一页" id="btn12">
    <input type="button" value="尾页" id="btn13">
    <span>当前页：</span>
    <input type="text" value="1" id="page">
    <span>每页显示条数:</span>
    <input type="text" value="10" id="pagesize">
    <span>总页数：</span>
    <input type="text" id="sizeauto" disabled>
</div>
</body>
</html>